
<%@ page import="org.springframework.context.support.MessageSourceAccessor" %>
<%@ page import="org.springframework.web.context.support.WebApplicationContextUtils" %>
<%@ page import="com.gph.saviorframework.OaConstants" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<%@ include file="/include/taglibs.jsp" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
    pageContext.setAttribute("base", basePath);

    MessageSourceAccessor messages = WebApplicationContextUtils.getWebApplicationContext(getServletConfig().getServletContext()).getBean(MessageSourceAccessor.class);
    String basePath2 = request.getScheme() + "://" + messages.getMessage("serverip") + ":" + request.getServerPort();
    String content = basePath2+request.getContextPath()+"/"+ OaConstants.APP_PATH+"/app-update/download-file-lasted";
    pageContext.setAttribute("content", content);
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>注册</title>
    <!-- basic styles -->
    <meta name="description" content="User login page"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <%-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>--%>
    <base href="<%=basePath%>"/>

    <link href="${ctx}/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="${ctx}/css/font-awesome.min.css" />
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="${ctx}/css/jquery-ui-1.10.3.custom.min.css" />
    <link rel="stylesheet" href="${ctx}/css/bootstrap-timepicker.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="${ctx}/css/ace.min.css" />
    <link rel="stylesheet" href="${ctx}/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="${ctx}/css/ace-skins.min.css" />
    <!-- fonts -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
    <!--my css-->
    <link rel="stylesheet" href="${ctx}/css/base.css">
    <link rel="stylesheet" href="${ctx}/css/style.css">
    <!-- ace settings handler -->
    <script src="${ctx}/js/ace-extra.min.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery-1.10.2.min.js"></script>
    <script src="${ctx}/assets/admin/LingUI/js/jquery/jquery-form.js" type="text/javascript"></script>
    <script src="${ctx}/assets/admin/LingUI/js/layer/layer.js" type="text/javascript"></script>
    <script src="${ctx}/assets/admin/LingUI/js/layer/layer.lui.js" type="text/javascript"></script>

    <%--表单验证begin--%>
    <script src="${ctx}/js/jquery.validate.min.js"></script>
    <script src="${ctx}/js/messages_zh.js"></script>
    <%--表单验证end--%>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
        $.validator.setDefaults({
            submitHandler: function() {
                submitData();
            }
        });
        // 手机号码验证
        jQuery.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");
        $().ready(function() {
            // 在键盘按下并释放及提交后验证提交表单
            $("#user_form").validate({
                rules: {
                    name: "required",
                    gender: "required",
                    certificateType: "required",
                    certificateNum:"required",
                    company:"required",
                    companyType1:"required",
                    companyType2:"required",
                    department:"required",
                    zhiCheng:"required",
                    mobile: {
                        required : true,
                        minlength : 11,
                        // 自定义方法：校验手机号在数据库中是否存在
                        // checkPhoneExist : true,
                        isMobile : true
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    name: "请输入您的名字",
                    gender: "请选择您的性别",
                    certificateType:"请选择证件类型",
                    certificateNum:"请输入证件号码",
                    company:"请输入您的单位名称",
                    companyType1:"请选择您的单位性质",
                    companyType2:"请选择您的单位性质",
                    department:"请输入您的部门",
                    zhiCheng:"请输入您的职称",
                    mobile:{
                        required : "请输入手机号",
                        minlength : "确认手机不能小于11个字符",
                        isMobile : "请正确填写您的手机号码"
                    },
                    email:"请输入您的邮箱地址"
                }
            });
        });
    </script>
    <style>
        .error{
            color:red;
            font-size: 10px;
        }
    </style>
</head>
<body>
<div class="bg" style="min-height: 880px;">
    <div class="container">
        <div class="toph">
            <div class="top_l">
                <img src="${ctx}/images/logo.png" alt="">
                <span>"科学"号线上运行管理平台 | 注册</span>
            </div>
            <div class="top_r">
                <span><a href="${ctx}/login" >已有账号，请登录</a></span>
            </div>
        </div>
        <form  role="form" id="user_form">
            <div class="rigis_m">
                <div class="in_b">
                    <span>姓名</span>
                    <input type="text" name="name" title="" style="width: 132px;height: 37px;" >
                    <label style="margin:0 5px 0 33px;"><input name="gender" type="radio" value="M" style="width: 20px;height: 20px;background-color:#fff;" checked/>男 </label>
                    <label style="margin:0 5px 0 10px;"><input name="gender" type="radio" value="F" style="width: 20px;height: 20px;background-color:#fff;"/>女 </label>
                    <span id="sp1" style="color:red;font-weight:400;font-size:10px;"></span>
                </div>
                <div class="in_b">
                    <span>证件类型</span>
                    <select name="certificateType" id="certificateType" title="">
                        <option value="-1">请选择</option>
                    </select>
                    <span id="sp2" style="color:red;font-weight:400;font-size:10px;"></span>
                </div>
                <div class="in_b">
                    <span>证件号</span>
                    <input type="text" name="certificateNum" title="">
                    <span id="sp3" style="color:red;font-weight:400;font-size:10px;"></span>
                </div>
                <div class="in_b">
                    <span>单位</span>
                    <input type="text" name="company" title="">
                    <span id="sp4"  style="color:red;font-weight:400;font-size:10px;"></span>
                </div>
                <div class="in_b">
                    <span>单位性质1</span>
                    <select name="companyType1" id="companyType1" title="">
                        <option value=""></option>
                        <option value=""></option>
                    </select>

                    <span id="sp5" style="color:red;font-weight:400;font-size:10px;"></span>
                </div>
                <div class="in_b">
                    <span>单位性质2</span>
                    <select name="companyType2" id="companyType2" title="">
                        <option value=""></option>
                        <option value=""></option>
                    </select>
                </div>
                <div class="in_b">
                    <span>所属部门</span>
                    <input type="text" name="department" title="">
                    <%--  <select name=""  title="">
                          <option value=""></option>
                          <option value=""></option>
                      </select>--%>
                    <span id="sp6"  style="color:red;font-weight:400;font-size:10px;"></span>
                </div>
                <div class="in_b">
                    <span>职称</span>
                    <input type="text" name="zhiCheng" title="">
                    <%--   <select name=""  title="">
                           <option value=""></option>
                           <option value=""></option>
                       </select>--%>
                    <span id="sp7"  style="color:red;font-weight:400;font-size:10px;"></span>
                </div>
                <div class="in_b">
                    <span>联系电话</span>
                    <input type="text" name="mobile" title="">
                    <span id="sp8"  style="color:red;font-weight:400;font-size:10px;"></span>
                </div>
                <div class="in_b">
                    <span>邮箱</span>
                    <input type="email" name="email" title="">
                    <span id="sp9"  style="color:red;font-weight:400;font-size:10px;"></span>
                </div>
                <div class="in_b">
                    <button  id="J_submit"  >确定</button>
                 <%--   <input type="submit"  id="J_submit" value="确定" />--%>
                    <%-- <a id="J_submit">下一步</a>--%>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    var form = "user_form";
    var $form = $("#" + form);

    $(function () {
        loadCertificateType();
        loadCompanyType1();
        loadCompanyType2();
    });
    //切换到登录页面
    function login() {
        window.location.href="${ctx}/${appPath}/vesselNum/view?applyId=${apply.id}"
    }

    //加载证件类型
    function loadCertificateType() {
        $.ajax({
            type: 'GET',
            url: '${ctx}/${frameworkPath}/item/Certificate_Type/sub',
            async: false,
            dataType: 'json',
            success: function (data) {
                var tempAjax = "";
                $.each(data, function (idx, item) {
                    tempAjax += "<option value='" + item.value + "'>" + item.name + "</option>";
                });
                $("#certificateType").empty();
                $("#certificateType").html(tempAjax);
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {
                lui.fail('加载数据失败！');
            }
        });
    }

    //加载单位性质1类型
    function loadCompanyType1() {
        $.ajax({
            type: 'GET',
            url: '${ctx}/${frameworkPath}/item/Company_Type1/sub',
            async: false,
            dataType: 'json',
            success: function (data) {
                var tempAjax = "";
                $.each(data, function (idx, item) {
                    tempAjax += "<option value='" + item.value + "'>" + item.name + "</option>";
                });
                $("#companyType1").empty();
                $("#companyType1").html(tempAjax);
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {
                lui.fail('加载数据失败！');
            }
        });
    }

    //加载单位性质2类型
    function loadCompanyType2() {
        $.ajax({
            type: 'GET',
            url: '${ctx}/${frameworkPath}/item/Company_Type2/sub',
            async: false,
            dataType: 'json',
            success: function (data) {
                var tempAjax = "";
                $.each(data, function (idx, item) {
                    tempAjax += "<option value='" + item.value + "'>" + item.name + "</option>";
                });
                $("#companyType2").empty();
                $("#companyType2").html(tempAjax);
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {
                lui.fail('加载数据失败！');
            }
        });
    }


    function submitData() {
        $form.ajaxSubmit({
            url: "${ctx}/${frameworkPath}/user/userRegister",
            type: "post",
            async: false,
            dataType: 'json',
            beforeSubmit: function (message) {
                $('#J_submit').attr('disabled', true);
            },
            success: function (message) {
                $('#J_submit').attr('disabled', true);
                debugger;
                if (message.success) {
                    debugger;
                   layer.open({
                       type: 1,
                       title:'注册提示',
                       content: $('#bgm'),
                       area: ['80%', '80%'], //宽高
                       end: function () {
                           //location.reload();
                           window.location.href="${ctx}/login";
                       }
                     /* type:1,
                      title: "注册成功",
                      btn: ['确定', '关闭'],
                      btnAlign:'c',
                        content: '${ctx}/${frameworkPath}/user/registerSuccess',
                        area: ["80%", "80%"],
                        yes: function (index, layero) {
                            layer.close(index);

                        },
                        cancel: function (index, layero) {
                            layer.close(index);
                        },
                        end: function () {
                            //location.reload();
                            window.location.href="${ctx}/login";
                        }*/
                    });


                }
                else {
                    lui.fail('提交失败'+message.error);
                    $('#J_submit').attr('disabled', false);
                }
            }
        });
    }
</script>
</body>
<div class="bg"  id="bgm" style="min-height: 400px;display: none;">
    <div class="container">
        <div class="toph">
            <div class="top_l">
                <img src="${ctx}/images/logo.png" alt="">
                <span>"科学"号线上运行管理平台 | 注册</span>
            </div>
        </div>
        <form  role="form" >
            <div class="rigis_m" style="height:300px;">
                <div class="apply_mt" style="text-align: left;padding:10px;font-size: 18px;font-weight: 600; color: #3b3d3f;font-family:'微软雅黑';padding-top:100px;">
                    您已提交注册信息，请等待管理员审核。
                    <p style="padding-top:28px;">管理员联系方式：电话0532-87072010，邮箱morv@qdio.ac.cn</p>
                </div>
            </div>
        </form>
    </div>
</div>
</html>
